<template>
    <div id="collection" :key="dat">
        <div class="title">
            <back  operation="" Title="我的收藏"></back>
        </div> 
        
        <div class="reels" 
        v-infinite-scroll="load" v-show="this.listUrl.length!==0"
        :infinite-scroll-disabled="disabled">
            <img v-for="(pictures,index) in listUrl" :alt="pictures.imgId" :src="pictures.url" :key="index" @click="ID($event),display($event)"> 
        </div>

        <imgShow :show="BogShow" :url="BogImg.BogUrl" @click.native="display($event)">
            <do-fa>
                <i class="el-icon-star-off" v-if="!isCollection" @click="Collection"></i>
                <i class="el-icon-star-on" v-if="isCollection" @click="Collection"></i>
                <i class="el-icon-download" @click="Download"></i>
            </do-fa>
        </imgShow>

        <bot v-if="noMore"></bot>
    </div>
</template>

<script>
import back from  "../../../components/back.vue"
import Bot from "../../../components/bot.vue"
import imgShow from "../../../components/imgShow.vue"
import DoFa from "../../../components/DF.vue"


import {userList,download} from "../../../api/Pictures"
import {removeColl,addColl,selectID} from "../../../api/Collect"


export default {
    name: 'works',
components:{
    back,Bot,imgShow,DoFa
},
    data() {
        return {
            dat:0,//用于更新界面
            listUrl:[],//图片的数组
            loading: false,//是否需要加载
            Sum:1,//记录总数
            page:1,
            size:10,
            BogImg:{
                BogId:-1,//大图的ID
                BogUrl:"",//大图url
            },
            BogShow:false,//大图显示
            isCollection:true,//收藏
            msg:"",//提升文本
        };
    },
    computed:{
        noMore(){
            return this.listUrl.length>=this.Sum
        } ,
        disabled () {
             return this.loading || this.noMore
      }
    },
    mounted() {
       
    },

    methods: {
        async ID($event){
            this.BogImg.BogId=$event.target.alt
            this.BogImg.BogUrl=$event.target.src
            let {data}=await selectID({
                picturesId: this.BogImg.BogId,
                userId: this.$store.state.user.userId
            })
            if(data.code===200){
                if(data.data!==null){
                    this.isCollection=true
                }else{
                    this.isCollection=false
                }
            }
        },
        //下载
       async Download($event){
           $event.stopPropagation();//阻止事件穿透
           let data = await download({
                ID:this.BogImg.BogId
           })


            let list= data.headers["content-disposition"].split("=") 

            let url = window.URL.createObjectURL(new Blob([data.data]));
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;

            
            link.setAttribute('download', list[1]);

            document.body.appendChild(link);
            link.click()


        },

        //取消收藏
        async Collection($event){
            $event.stopPropagation();//阻止事件穿透,请放在开头，不然你不知道哪里失效

            let data={}
            //判断是否登陆
            if(this.$store.state.user.userId===-1){
                    this.$dialog.confirm({
                        message: '还没登陆，不能收藏，去登陆吧！',
                    }) .then(() => {
                         this.$router.push("signin")
                    }).catch(() => {
                        return 
                    });
            }else{

                if(!this.isCollection){
                        data = await addColl({
                        picturesId: this.BogImg.BogId,
                        userId: this.$store.state.user.userId
                    }) 
                    if(data.data.code===200){
                        this.isCollection=data.data.data
                    }else{
                        this.$dialog.alert({
                            message:data.data.msg,
                            }).then(() => {
                            
                        }); 
                }
                }else{
                    data = await removeColl({
                        picturesId: this.BogImg.BogId,
                        userId: this.$store.state.user.userId
                    })}

                    if(data.data.code===200){
                        this.isCollection=data.data.data
                       
                       for (let i = 0; i < this.listUrl.length; i++) {
                            if( this.listUrl[i].imgId !==  Number(this.BogImg.BogId) ){
                                this.listUrl.splice(i,1)
                                this.dat+=1
                                return
                            }
                       }
                      
                    }else{
                        this.$dialog.alert({
                            message:data.data.msg,
                            }).then(() => {
                            
                        }); 
                    }

                
            }

            
         
           // 
          
        },
        //大图显示
        display(){
            this.BogShow=!this.BogShow
        },

        //加载
        load (){
            this.loading=true
            setTimeout(()=>{
                this.getUserList()
            },0)
         
        
        },
        //获取数据
       async getUserList(){
             let {data}= await userList({
                 pageNum:this.page,
                 size:this.size,
             })
                if(data.code==200){
                    this.Sum=data.data.constSum
                    this.page+=1
                    this.listUrl=this.listUrl.concat(data.data.list);
                    this.loading = false
                }else{
                    this.$dialog.alert({
                        message: data.msg,
                        }).then(() => {
                        // on close
                    });
                }
        }
    },
};
</script>

<style  lang="scss" scoped>
#collection{
    width: 100vw;
    padding-top: 10vh;
    max-height: 100vh;
    overflow:auto;
}
.title{
    width: 100%;
}
.reels{
    width: 90%;
    margin: auto;
    padding: 1vh 0;
    bottom: 5vh;
    box-shadow: 0px 0px 4px 1px #fd5d13;
    text-align: center;
    img{
        border: solid 2.5px #b293fb;
        padding: 0.5px;
        width: 95%;
    }
}

</style>.